<template>
  <!-- pages/login/login.wxml -->
  <view class="content">
    <view class="login-bg">
      <t-image
        src="/static/images/login_bg.png"
        mode="aspectFill"
        width="100%"
        height="100%"
      />
      <view class="title-box">
        <t-image
          src="/static/images/title.png"
          mode="aspectFill"
          width="100%"
          height="100%"
        />
      </view>
      <!-- <view class="title">
        <view class="headline">武侯城市安全一张图管理平台</view>
      </view> -->
    </view>
    <view class="login-box">
      <view class="password-login">
        <t-input
          label="账号"
          placeholder="请输入手机号"
          :value="passwordInfo.mobile"
          @change="onAccountChange"
          cursor-spacing="90"
        ></t-input>
        <t-input
          label="密码"
          placeholder="请输入密码"
          type="password"
          cursor-spacing="20"
          :value="passwordInfo.password"
          @change="onPasswordChange"
          clearable
        />
      </view>

      <view class="login-button">
        <t-button
          theme="primary"
          size="large"
          block
          shape="round"
          @tap.native="login"
          :disabled="!isSubmit"
          >登录</t-button
        >
      </view>
    </view>
  </view>
</template>

<script>
import { login, getUserInfo, getUserPermission } from "../../api/user";
import { Base64 } from "js-base64";
// pages/login/login.js
export default {
  components: {},
  data() {
    return {
      phoneNumber: "",
      isPhoneNumber: false,
      isCheck: false,
      isSubmit: false,
      isPasswordLogin: false,
      passwordInfo: {
        mobile: "",
        password: "",
      },
    };
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {},
  onShow() {
    const tokenString = uni.getStorageSync("access_token");

    if (tokenString) {
      uni.switchTab({
        url: "/pages/home/index",
      });
    }
  },
  methods: {
    /* 自定义功能函数 */
    changeSubmit() {
      if (this.passwordInfo.mobile !== "" && this.passwordInfo.mobile !== "") {
        this.setData({
          isSubmit: true,
        });
      } else {
        this.setData({
          isSubmit: false,
        });
      }
    },

    // 手机号变更
    onPhoneInput(e) {
      const isPhoneNumber = /^[1][3,4,5,7,8,9][0-9]{9}$/.test(e.detail.value);
      this.setData({
        isPhoneNumber,
        phoneNumber: e.detail.value,
      });
      this.changeSubmit();
    },

    // 用户协议选择变更
    onCheckChange() {
      this.setData({
        isCheck: !this.isCheck,
      });
      this.changeSubmit();
    },

    /** 账号变更 */
    onAccountChange(e) {
      this.setData({
        passwordInfo: {
          ...this.passwordInfo,
          mobile: e,
        },
      });
      this.changeSubmit();
    },

    async loginSuccess() {
      try {
        await getUserInfo();
        await getUserPermission();
        uni.switchTab({
          url: "/pages/home/index",
        });
      } catch (error) {
        console.log("登录成功后失败：", error);
      }
    },

    /** 密码变更 */
    onPasswordChange(e) {
      this.setData({
        passwordInfo: {
          ...this.passwordInfo,
          password: e,
        },
      });
      this.changeSubmit();
    },

    async login() {
      const { mobile, password } = this.passwordInfo;
      uni.showLoading({
        mask: true,
      });
      try {
        const res = await login({
          mobile,
          password: Base64.encode(password),
        });
        // console.log('登录结果', res)
        const resData = res?.data;
        if (resData?.token) {
          await uni.setStorageSync("access_token", resData?.token);
          await this.loginSuccess();
        }
      } catch (error) {
        console.log("CatchClause", error);
        console.log("CatchClause", error);
        uni.showModal({
          title: "登录失败",
          content: "请稍后再试",
          showCancel: false,
          complete: (res) => {
            // if (res.confirm) {
            // }
          },
        });
      }
      uni.hideLoading();
    },

    /** 微信登录 */
    async getPhoneNumber(e) {
      // console.log(e.detail.code); // 动态令牌
      // console.log(e.detail.errMsg); // 回调信息（成功失败都会返回）
      // console.log(e.detail.errno); // 错误码（失败时返回）

      uni.showLoading({
        mask: true,
      });
      try {
        if (e.detail.code) {
          //发起网络请求
          try {
            const resData = await login({
              code: e.detail.code,
            });
            // console.log('请求结果：', resData);
            const token = resData?.data?.token;
            if (token) {
              // console.log('登录成功！', token);
              await uni.setStorageSync("access_token", token);
              await this.loginSuccess();
            }
          } catch (error) {
            console.log("CatchClause", error);
            console.log("CatchClause", error);
            uni.showModal({
              title: "登录失败",
              content: "请稍后再试",
              showCancel: false,
              complete: (res) => {
                // if (res.confirm) {
                // }
              },
            });
            console.log("请求失败：", error);
          }
        } else {
          console.log("登录失败！" + resData.errMsg);
        }
      } catch (error) {
        console.log("CatchClause", error);
        console.log("CatchClause", error);
        console.log("登录失败：", error);
      }
      uni.hideLoading();
    },
  },
};
</script>
<style lang="less">
/* pages/login/login.wxss */
@import "/variable.less";

.title {
  height: 50vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.title-box {
  position: absolute;
  left: 0;
  right: 0;
  top: 20%;
}

.headline {
  color: @gy1;
  font-size: 44rpx;
  font-weight: 600;
  line-height: 36px;
  font-family: "PingFang SC";
  opacity: 1;
  text-align: left;
}

.body-large {
  color: @gy1;
  font-size: @body-large;
  font-weight: 400;
  font-family: "PingFang SC";
  text-align: left;
  line-height: 24px;
}

.welcome {
  .headline();
  width: 231px;
  height: 36px;
  margin: 8px auto 16px 20px;
}

.phone {
  display: flex;
  align-items: center;
  height: 56px;
  width: 100%;
  margin-top: 8px;
  margin-left: 16px;
  border-bottom: 0.5px solid @gray3;

  .area-code {
    display: inline-block;
    width: 65px;
    height: 56px;
    opacity: 1;

    .code {
      .body-large();
      width: 65px;
      height: 24px;
      opacity: 1;
      margin: 16px 0;
      border-right: 0.5px solid @gray3;

      .t-icon {
        display: inline-block;
      }
    }

    .caret-down-small {
      position: absolute;
    }
  }

  .phone-input {
    display: inline-block;
    margin-left: 1px;

    .t-input {
      background-color: transparent;

      &--border::after {
        height: 0;
      }
    }
  }
}

.login-tip {
  width: 204px;
  height: 20px;
  opacity: 1;
  color: @gy3;
  font-size: @body-small;
  font-weight: 400;
  font-family: "PingFang SC";
  text-align: left;
  line-height: 20px;
  margin-left: 16px;
  margin-top: 12px;
}

.user-agreement {
  margin-top: 32px;
  margin-left: 17px;
  height: 20px;
  width: 117px;
  display: flex;

  .agreement-check {
    color: @brand7-normal;
  }

  .agreement-text {
    color: @gy1;
    font-size: @body-small;
    font-weight: 400;
    height: 100%;
    margin-left: 5px;
  }
}

.login-button {
  margin: 16px;
}

.others {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;

  &-icon {
    margin: 8px;
  }
}

.forget-password {
  display: flex;
  font-size: @body-small;
  align-items: center;
  margin-left: 16px;
}

.content {
  position: relative;
  width: 100vw;
  height: 100vh;

  .login-bg {
    width: 100%;
    height: 70%;
    border-bottom-left-radius: 120rpx;
    border-bottom-right-radius: 120rpx;
    overflow: hidden;
  }

  .login-box {
    box-sizing: border-box;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    // width: 100%;
    bottom: 200rpx;
    width: 673rpx;
    background: #ffffff;
    box-shadow: 0rpx 0rpx 23rpx 2rpx rgba(3, 22, 46, 0.1);
    border-radius: 12rpx 12rpx 12rpx 12rpx;
    padding: 40rpx;
  }
}
</style>
